<template>
  <div class="featured">
    <title-view :label="titleText" v-if="titleVisible && data && data.length > 0"></title-view>
    <div class="featured-list">
      <div class="featured-item-wrapper">
        <div class="featured-item" v-for="(item, index) in data" :key="index" @click="showBookDetail(item)">
          <div class="img-wrapper">
            <img class="img" :src="item.cover">
          </div>
          <div class="content-wrapper">
            <div class="title title-small" ref="title">{{item.title}}</div>
            <div class="author sub-title" ref="author">{{item.author}}</div>
            <div class="category third-title" ref="category">{{categoryText(item.category)}}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
import TitleView from './Title'
import { realPx } from '@/utils/utils'
import { categoryText } from '../../utils/store'
import { storeHomeMixin } from '../../utils/mixin'

export default {
  mixins: [storeHomeMixin],
  components: {
    TitleView
  },
  props: {
    data: Array,
    titleVisible: {
      type: Boolean,
      default: true
    },
    titleText: {
      type: String
    },
    btnText: {
      type: String
    }
  },
  computed: {
    width () {
      return window.innerWidth - realPx(20) - realPx(60) + 'px'
    }
  },
  methods: {
    categoryText (category) {
      return categoryText(category, this)
    },
    resize () {
      this.$nextTick(() => {
        this.$refs.title.forEach(item => {
          item.style.width = this.width
        })
        this.$refs.author.forEach(item => {
          item.style.width = this.width
        })
        this.$refs.category.forEach(item => {
          item.style.width = this.width
        })
      })
    }
  }
}
</script>

<style lang="scss" rel="stylesheet/scss" scoped>
  .featured {
    .featured-list {
      width: 100%;
      padding: 0 px2rem(10);
      box-sizing: border-box;
      .featured-item-wrapper {
        width: 100%;
        display: flex;
        flex-flow: row wrap;
        justify-content: flex-start;
        align-items: flex-start;
        .featured-item {
          background-color: #fff;
          &:hover{
            transition: 300ms;
            cursor: pointer;
            transform: scale(1.02);
            box-shadow: px2rem(0) px2rem(0) px2rem(4) px2rem(4) rgba(0, 0, 0, 0.11);
          }
          flex: 0 0 50%;
          width: 50%;
          padding: px2rem(5) 0;
          @include top;
          .img-wrapper {
            flex: 0 0 30%;
            width: 30%;
            .img {
              width: 100%;
              // width: px2rem(50);
              // height: px2rem(75);
            }
          }
          .content-wrapper {
            flex: 1;
            width: px2rem(117.5);
            padding: 0 px2rem(5);
            box-sizing: border-box;
            .author {
              margin-top: px2rem(15);
            }
            .category {
              margin-top: px2rem(5);
            }
          }
        }
      }
    }
  }
</style>
